/**
 * Created by dell on 2017/5/4.
 */
import {HostListener, Inject, Input, ViewEncapsulation} from "@angular/core";
import {Component} from '@angular/core';
import * as globals from '@core/globals/globals.service';
import {DOCUMENT} from "@angular/common";

@Component({
  selector: 'seed-toolbar-menu',
  template:
      `
    <seed-icon *ngIf="!isUnfold" [color]="color" [name]="icon['0']"></seed-icon>
    <seed-icon *ngIf="isUnfold" [color]="color" [name]="icon['1']"></seed-icon>
  `,
  host: {'class': 'seed-toolbar-menu'},
  encapsulation: ViewEncapsulation.None,
})
export class ToolbarMenuComponent {
  public isUnfold: any;
  public subscription: any;
  public icon: Array<string>;
  private _color: string;

  constructor(
    @Inject(DOCUMENT) private _document: any
  ) {
    this.icon = ['icon-menu-inactive', 'icon-menu-active'];
    this.color = 'c3';
    this.subscription = globals.isUnfold.subscribe((value) => {
      this.handleChangeStatus(value);
    });
  }

  @Input()
  get color(): string {
    return this._color;
  }

  set color(value: string) {
    this._color = value;
  }


  handleChangeStatus(val: boolean) {
    this.isUnfold = val;
  }

  @HostListener('click')
  toggle() {
    if (this.isUnfold) {
      globals.isUnfold.next(false);
    } else {
      globals.isUnfold.next(true);
    }
    this._document.body.classList.toggle('unfold');
  }

}
